.keyboard {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  font-size: $uiRootFontSize;
  pointer-events: none;
}

.keyboard-container {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  margin: 0 auto;
  width: 680px;
  font-size: 14px;
  font-weight: bold;
  user-select: none;
}

.keyboard-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  width: 100%;
}

.keyboard-switcher {
  @include fa-icon;
  @extend .fa;
}

.keyboard-switcher,
.keyboard-key {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  width: 42px;
  height: 42px;
  word-wrap: normal;
  white-space: nowrap;
  color: $uiColor;
  background-color: $uiColor;
  transition: background-color .16s ease-in, color background-color .16s ease-in;
  user-select: none;
  cursor: pointer;
  pointer-events: all;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(0,0,0,0);

  &:active,
  &.active {
    color: $uiActiveColor;
    background-color: $uiActiveColor;
  }
}

.keyboard-key {
  color: fade-in($uiColor, .3);
  background-color: fade-out($uiColor, .3);

  &:active,
  &.active {
    color: fade-in($uiActiveColor, .3);
    background-color: fade-out($uiActiveColor, .3);
  }

  &[key=delete] {
    width: 72px;
  }

  &[key=tab] {
    width: 70px;
  }

  &[key="caps lock"] {
    width: 80px;
  }

  &[key=return] {
    width: 77px;
  }

  &[key=shift] {
    width: 95px;
  }

  &[key=space] {
    width: 100%;
  }
}

.keyboard-switcher {
  position: absolute;
  top: 20px;
  right: 20px;

  &:before {
    content: fa-content($fa-var-keyboard);
    font-size: 20px;
  }
}
